<template>
    <div class="main balance-list">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="用户名：" prop="userName">
                            <el-input @keyup.enter.native="search" v-model="listQuery.userName" placeholder="用户名" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="手机号：" prop="mobile">
                            <el-input @keyup.enter.native="search" v-model="listQuery.mobile" placeholder="用户名" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="银行卡号：" prop="cardNo">
                            <el-input @keyup.enter.native="search" v-model="listQuery.cardNo" placeholder="银行卡号" maxlength="60" clearable></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="用户角色：" prop="role">
                            <el-select v-model="listQuery.role" placeholder="请选择" clearable>
                                <el-option label="兰蜜" :value="1"></el-option>
                                <el-option label="大区" :value="2"></el-option>
                                <el-option label="董事" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="用户名称" prop="userName" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="用户角色" prop="role" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <!--<span v-if="scope.row.role===0">普通用户</span>-->
                        <span v-if="scope.row.role===1">兰密</span>
                        <span v-else-if="scope.row.role===2">大区</span>
                        <span v-else-if="scope.row.role===3">董事</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="手机号" prop="mobile" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.mobile || '-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="公司名称" prop="companyName" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.companyName || '-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="对公账户" prop="companyAccount" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.companyAccount || '-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="银行卡号" prop="cardNo" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="开户银行" prop="bankName" min-width="100" show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="开户支行" prop="bankOfDeposit" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.bankOfDeposit || '-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="持卡人" prop="cardholder" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.cardholder || '-'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="130" v-if="rightsButtons['edit']">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>

            <el-dialog title="编辑" :visible.sync="showEditPop">
                <el-form :model="formData" :rules="formRule" size="medium" ref="form" label-width="120px">
                    <el-form-item label="用户名称:" prop="userName">
                        <span v-text="formData.userName"></span>
                    </el-form-item>
                    <template v-if="formData.role===3">
                        <el-form-item label="公司名称:" prop="companyName">
                            <el-input v-model="formData.companyName" placeholder="公司名称" maxlength="60"></el-input>
                        </el-form-item>
                        <el-form-item label="对公账户:" prop="companyAccount">
                            <el-input v-model="formData.companyAccount" placeholder="对公账户" maxlength="60"></el-input>
                        </el-form-item>
                    </template>
                    <el-form-item label="银行卡账号:" prop="cardNo">
                        <el-input v-model="formData.cardNo" placeholder="银行卡账号" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称:" prop="bankName">
                        <el-input v-model="formData.bankName" placeholder="银行名称" maxlength="60"></el-input>
                    </el-form-item>
                    <el-form-item label="开户支行:" prop="bankOfDeposit">
                        <el-input v-model="formData.bankOfDeposit" placeholder="开户支行" maxlength="60"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                    <el-button @click="showEditPop = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    export default {
        name: 'bankcardList',
        data(){
            return {
                listLoading: false,
                listQuery: {
                    userName: '',
                    mobile: '',
                    cardNo: '',
                    role: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                list: [],
                listTotal: 0,

                formData: {
                    title: '',
                    content: '',
                    sendTime: '',
                    isTimingSend: 0,
                    role: '',
                    type: 1,
                    userId: ''
                },
                formRule: {
                    cardNo: [{required: true, message: '请输入银行卡账号', trigger: 'change'}],
                    bankName: [{required: true, message: '请输入银行名称', trigger: 'change'}],
                    bankOfDeposit: [{required: true, message: '请输入开户支行', trigger: 'change'}]
                },
                showEditPop: false,
                btnDisabled: false
            }
        },
        created(){
            this.getList();
        },
        methods: {
            getList(){
                this.listLoading = true;
                this.request({
                    url: '/bsnl-manage/agentBankCard/list',
                    method: 'post',
                    data: this.listQuery
                }).then(({data, totalCount}) => {
                    this.list = data;
                    this.listTotal = totalCount;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                });
            },
            search(){
                this.listQuery.pageIndex = 1;
                this.getList();
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
            handleSizeChange (value) {
                this.listQuery.pageSize = value;
                this.getList();
            },
            handleCurrentChange(val){
                this.listQuery.pageIndex = val;
                this.getList();
            },
            showEdit(row){
                this.formData = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            save(){
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }

                    this.btnDisabled = true;
                    this.request({
                        url: '/bsnl-manage/agentBankCard/update',
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnDisabled = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnDisabled = false;
                    });
                });
            },
        }
    }
</script>
